<template>
  <div class="flexDomX" :class="props.className">
    <div class="flexContent" :class="props.classConent">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import {ref,watch} from 'vue'

defineOptions({name: "flexDomX"})
const props = defineProps({
  className: {
    type: [String, Object],
    default: ''
  },
  classConent: {
    type: [String, Object],
    default: ''
  },
  padding: {
    type: Object,
    default: [0, 0, 0, 0]
  },
})

// 判断prop传参的值。接受[String,Number]的style样式尺寸
function getPx(text, defaultPx = 'px') {
  let tempList = ['px', 'rpx', 'vw', 'vh', '%', 'em', 'auto']
  if (typeof text == 'string') {
    const havePx = tempList.find(row => text.includes(row))
    if (havePx) {
      return text
    } else {
      return `${parseFloat(text)}${defaultPx}`
    }
  } else if (typeof text == 'number') {
    let temp = parseFloat(text)
    return `${temp}${defaultPx}`
  }
  return text
}


const topData = ref(0)
const rightData = ref(0)
const bottomData = ref(0)
const leftData = ref(0)
watch(() => props.padding, (newV, oldV) => {
  let padding = {
    top: newV.padding?.length > 0 ? getPx(props.padding[0]) : 0,
    right: newV.padding?.length > 1 ? getPx(props.padding[1]) : 0,
    bottom: newV.padding?.length > 2 ? getPx(props.padding[2]) : 0,
    left: newV.padding?.length > 3 ? getPx(props.padding[3]) : 0
  }
  topData.value = getPx(padding.top)
  rightData.value = getPx(padding.right)
  bottomData.value = getPx(padding.bottom)
  leftData.value = getPx(padding.left)
}, {immediate: true, deep: true})
</script>

<style scoped lang='scss'>
.flexDomX {
  position: relative;
  flex: 1 1 auto;
  height: 100%;
  width: 100%;
  .flexContent {
    position: absolute;
    top: v-bind(topData);
    right: v-bind(rightData);
    bottom: v-bind(bottomData);
    left: v-bind(leftData);
  }
}
</style>